<template>
  <el-drawer
    :model-value="visible"
    :title="title"
    :size="size"
    :destroy-on-close="true"
    @update:model-value="emit('update:visible', $event)"
    @close="handleClose"
  >
    <slot></slot>
  </el-drawer>
</template>

<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  size: {
    type: [String, Number],
    default: 580,
  },
});

const emit = defineEmits(["update:visible", "close"]);

const handleClose = () => {
  emit("update:visible", false);
  emit("close");
};
</script>

<style lang="scss">
.el-drawer__header {
  margin-bottom: 0 !important;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}
</style>
